<template>
  <!--面包屑导航-->
  <Breadcrumb>
    <template #firstTitle>
      <span>权限管理</span>
    </template>
    <template #secondTitle>
      <span>权限列表</span>
    </template>
  </Breadcrumb>

  <!--卡片视图-->
  <el-card class="box-card">
    <!--用户列表-->
    <el-table border stripe :data="rightsList" v-loading="loading">
      <el-table-column type="index"></el-table-column>
      <el-table-column prop="authName" label="权限名称"></el-table-column>
      <el-table-column prop="path" label="路径"></el-table-column>
      <el-table-column prop="level" label="权限等级">
        <template #default="scope">
          <el-tag v-if="scope.row.level === '0'">一级</el-tag>
          <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
          <el-tag type="warning" v-else>三级</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getRights } from "@/api/rights.js"

const rightsList = ref([]); // 列表数据
const loading = ref(false);

onMounted(() => {
  getListData()
});

// 查询列表
const getListData = async () => {
  loading.value = true;
  const data = await getRights().finally(() => {
    loading.value = false;
  });
  rightsList.value = data;
};

</script>

<style lang="scss" scoped></style>
